
import baiduMap from '@/components/BaiduMap/index.vue'
import { createVNode, render } from "vue";
const div_map = document.createElement("div");
div_map.setAttribute("class", "baidu-map-container");
document.body.appendChild(div_map);

export default class MapglMgr {
    private static instance = new MapglMgr();

    private MapInstance = null;
    private MapGlInstance = null;

    private MapPreLayers = null;  //mapVgl 上一次显示的图层 下一次显示前 需要清掉

    static Instance() {
        return MapglMgr.instance;
    }

    getMapInstance(bmap: any) {
        if (!this.MapInstance) {
            this.MapInstance = new bmap.Map('mapContainer');
        }
        return this.MapInstance;
    }
    getMapGlInstance(mapvgl: any, map: any) {
        this.Mapvgl = mapvgl;
        this.MapInstance = map;

        if (!this.MapGlInstance) {
            console.error('new mapvgl');
            this.MapGlInstance = new mapvgl.View({
                map: map,
                mapType: 'bmap',
            });
        }
        else {
            this.clearLayers();
        }
        return this.MapGlInstance;
    }

    clearLayers() {    
        // const layers = this.MapGlInstance.getAllLayers();
        // console.error('layers', layers);
        // if (layers.length > 0) {
        //     layers.forEach((layer: any) => {
        //         this.MapGlInstance.removeLayer(layer);
        //     })
        // };
    }

    setMagGlVisible(vsb: boolean) {
        this.MapGlInstance._visible = vsb;
    }


    updateCanvas(obj: any) {
        if (!obj) return;
        if (obj.length && obj.length > 0) {
            console.log('typeof obj', obj);

            obj.forEach && obj.forEach((o: any) => {
                this.updateCanvas(o);
            })
        }
        Object.keys(obj).forEach((k) => {
            if (obj[k]) {
                console.log('obj[k]', obj[k]);
                if (k === 'canvas') {


                }
                this.updateCanvas(obj[k]);
            }
        });
    }

    private baiduMapIns: any = null;

    setBaiduMapIns(baiduMap: any) {
        this.baiduMapIns = baiduMap;
    }

    refreshConfig(config: any) {
        this.baiduMapIns.RefreshProps(config, null, null);
        this.baiduMapIns.Init();
    }
    refreshData(data: any) {
        this.baiduMapIns.RefreshProps(null, data, null);
        this.baiduMapIns.Init();
    }
    refreshCallbacks(callbacks: any) {
        this.baiduMapIns.RefreshProps(null, null, callbacks);
        this.baiduMapIns.Init();
    }

    //该函数在 xcMap mounted 调用
    renderMap(config: any, data: any, callbacks: any) {

        if (this.baiduMapIns) {
            // 更新数据 从xcMap 传给 baiduMap 的数据
            //先刷新 props 再调初始化
            div_map.style.visibility = 'visible'
            console.log('更新 props:',config, data,callbacks);
            this.baiduMapIns.RefreshProps(config, data, callbacks);
            this.baiduMapIns.Init();
            console.log('showMapAgain...');

           

            // div_map.style.opacity = '1';
            // div_map.style.pointerEvents = 'none'

            return;
        }

        render(null, div_map); //渲染后是真正的dom 不是虚拟dom
        const map_vnode = createVNode(baiduMap, { config, data, callbacks });
        //会做对比 再次调用会先比对 vnode 如果是相同的组件 则复用
        render(map_vnode, div_map); //渲染后是真正的dom 不是虚拟dom
    }

    showBaiduMap() {
        if (this.baiduMapIns) {
            this.baiduMapIns.setVisible(true);
        }
    }

    hideBaiduMap() {

        // 4.yes
        div_map.style.visibility = 'hidden'

        // 3. yes
        // div_map.style.opacity = '0';
        // div_map.style.pointerEvents = 'none'

        // 2.no 重绘
        // div_map.style.position = 'relative',
        // div_map.style.left = '99999px';

        // 1.no 重绘
        // if(this.baiduMapIns) {
        //     this.baiduMapIns.setVisible(false);
        // }
    }

    destroyMap() {
        //释放不了mapgl？ 改成 show hide 吧
        render(null, div_map); //渲染后是真正的dom 不是虚拟dom
    }
}
